<template>
    <div class="page-cont">
        <div v-show="groupSeletedWork == 0" class="input-group">
          <div>
            <p style="margin: auto 8px">组别</p>
            <a-input-search enter-button v-model:value="groupNumInput" @search="searchGroup" placeholder="输入组号1~6"
              style="width: 160px; margin-right: 12px" />
          </div>
          <div>
            <p style="margin: auto 8px">教师打分</p>
            <a-input placeholder="输入分数" style="width: 140px" />
          </div>
          <div>
            <p style="margin: auto 8px">企业打分</p>
            <a-input placeholder="输入分数" style="width: 140px" />
          </div>
          <a-button style="margin-left: 8px" type="primary" :disabled="!(groupNum >= 1 && groupNum <= 6)">提交</a-button>
        </div>
        <div v-show="groupSeletedWork == 0" class="group-info">
            <p v-if="groupNum >= 1 && groupNum <= 6">
                {{ groupNum }}组组员：{{ groupNames[groupNum - 1].toString() }}
            </p>
            <p v-else>
                打分前请选择组别！
            </p>
        </div>
        <div v-if="groupSeletedWork > 0" class="work-show-space">
            <div class="work-show-space-exit" @click="groupSeletedWork = 0">X</div>
            <div class="work-show-content">
                <!-- TODO 要显示的作业页面,mission是当前任务,groupSeletedWork是选中的组别 -->
                <div v-if="mission == 1">
                    <!--TODO 任务1课后作业-->
                </div>
                <div v-if="mission == 2">
                </div>
                <div v-if="mission == 3">
                </div>
                <div v-if="mission == 4">
                </div>
                <div v-if="mission == 5">
                </div>
                <div v-if="mission == 6">
                </div>

                <!-- 附件列表 -->
                <div style="width: 100%;height:32px;background:#888;display: flex;align-items: center;margin:8px 0">
                    <p style="color:white;margin:auto 8px">附件下载</p>
                </div>
                <div style="width: 100%;display: flex;margin-top: 8px;flex-flow: row wrap;">
                    <FileIcon v-for="(fName, i) in groupWorks[groupSeletedWork - 1].fileList" v-bind:key="i"
                        :fileName="fName">
                    </FileIcon>
                </div>
            </div>
        </div>
        <div v-else class="work-menu-space">
            <!--循环groupwoks-->
            <div v-for="(item, i) in groupWorks" v-bind:key="i"
                :class="['work-menu', { 'work-menu-filiter': ((i + 1) == groupNum || groupNum == 0) }]"
                @click="selectWork(i + 1)">
                <h2>{{ item.title }}</h2>
                <p>{{ item.content }}</p>
            </div>
        </div>
    </div>
</template>

<script setup>
//TODO 导入作业页面
import { ref } from 'vue';
import FileIcon from './FileIcon.vue';
import { numLimit } from '../util/util';
import {mission,groupNames} from "../store/index.js"
//当前搜索选中的组
let groupNum = ref(0);
//六组得分
let groupScoreList = ref([0, 0, 0, 0, 0, 0]);
//当前选中的作业
let groupSeletedWork = ref(0);
//当前选中的组的作业列表
let groupWorks = ref([
    {
        title: "第1组提交作业",
        content: "第1组提交作业内容",
        fileList: ['作业.ppt', '作业.doc']
    },
    {
        title: "第2组提交作业",
        content: "第2组提交作业内容",
        fileList: ['作业.ppt', '作业.doc', '作业.jpg']
    },
    {
        title: "第3组提交作业",
        content: "第3组提交作业内容",
        fileList: ['作业.ppt', '作业.doc', '作业.jpg']
    },
    {
        title: "第4组提交作业",
        content: "第4组提交作业内容",
        fileList: ['作业.ppt', '作业.doc', '作业.jpg']
    },
    {
        title: "第5组提交作业",
        content: "第5组提交作业内容",
        fileList: ['作业.ppt', '作业.doc', '作业.jpg']
    },
    {
        title: "第6组提交作业",
        content: "第6组提交作业内容",
        fileList: ['作业.ppt', '作业.doc', '作业.jpg']
    },
]);
//判断组号是否合法
function groupNumIsIllegal(value) {
    return !(value >= 1 && value <= 6);
}
//处理对应的作业点击事件
function selectWork(i) {
    groupSeletedWork.value = i;
}
//输入的组号
let groupNumInput = ref("");
//搜索组号
function searchGroup(val) {
    groupNumInput.value = groupNum.value = numLimit(val, 1, 6);
}
//提交分数
function scoreSubmit(val) {
    let score = numLimit(val, 0, 100);
    //TODO 提交组号和分数
}
</script>

<style scoped>
.page-cont {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.input-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    width: 100%;
    max-width: 900px;
}

.input-group>p {
    font-size: 18px;
}

.input-group>div {
    display: flex;
    align-items: center;
}

.group-info {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    width: 80%;
    /* background: rgb(247, 219, 230); */
}

.group-info>p {
    margin: auto 8px;
    font-size: 18px;
}

.work-menu-space {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: calc(100% - 48px * 2);
    width: 100%;
    box-shadow: 0 2px 16px rgb(0 0 0 / 12%);
    padding: 14px 0;
}

.work-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90%;
    height: 14%;
    background-color: #f8f8f8;
    border-radius: 4px;
    user-select: none;
    cursor: pointer;
    transition: 0.2s;
}

.work-menu:hover {
    box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
    text-shadow: 1px 1px #adadad;
}

.work-menu>p {
    margin: 0
}

.work-menu>h2 {
    margin: 0
}

.work-menu-filiter {
    background-color: #dddddd7f;
}

.work-show-space {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: top;
    width: 100%;
    height: 100%;
    border: 2px solid #70707030;
    padding: 8px;
}

.work-show-space-exit {
    position: relative;
    top: -8px;
    right: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eee;
    border: 1px solid;
    color: black;
    width: 24px;
    height: 24px;
    user-select: none;
    cursor: pointer;
    transition: 0.3s;
}

.work-show-space-exit:hover {
    background-color: red;
    color: white;
}

.work-show-content {
    width: 100%;
    height: calc(100% - 24px);
    overflow-y: auto;
    overflow-x: hidden;
}
</style>